<template>
	<div class="page">
		<!-- 头部 -->
		<headerVue :HeadIndex="2"></headerVue>
		<div class="img">
			<img src="../../assets/imgs/design/banner.jpg" alt="" srcset="" />
		</div>

		<div class="nav">
			<div class="w1400">
				<div class="ul">
					<div class="list" :class="tabIndex == index ? 'active' : ''" v-for="(item,index) in designClassData" :key="item.id" @click="tabClick(item,index)">
						{{item.title}}
					</div>
				</div>
			</div>

		</div>
		<!-- 列表 -->
		<listVue :data=designIndexData></listVue>
		<!-- 底部 -->
		<footerVue></footerVue>
	</div>
</template>

<script setup>
	import headerVue from '../../components/header.vue';
	import footerVue from '../../components/footer.vue';
	import listVue from './list.vue';
	import { onMounted, ref, reactive } from 'vue';
	import { designClassApi,designIndexApi } from '@/api/index.js'

	const tabIndex = ref(0);
	const designIndexData = ref([]);
	const designClassData = ref([]);
	
	const getDesignData = async (id = 0) => {
		try {
			const params = {
				id,
				page: 1,
				limit: 10,
			}
			const res = await designIndexApi(params);
			designIndexData.value = res.data.data
		} catch (error) {
			console.log(error)
		}
	}

	const tabClick = (item, index) => {
		tabIndex.value = index;
		getDesignData(item.id)
	}

	onMounted(async () => {
		try {
			const res = await designClassApi();
			designClassData.value = res.data
		} catch (error) {
			console.log(error)
		}
		getDesignData();
	})

</script>

<style scoped lang="less">
	.page {
		background: #f9f9f9;
	}

	.nav {
		background: #333333;
		padding: 50px;
	}

	.img {
		width: 100%;
		overflow: hidden;

		img {
			vertical-align: bottom;

		}
	}

	.w1400 {
		width: 1400px;
		margin: 0 auto;

		.ul {
			display: flex;
			justify-content: center;

			.list {
				position: relative;
				font-size: 13px;
				font-weight: 500;
				color: #888;
				margin-right: 20px;
				padding: 9px 23px;
				border-radius: 30px;
				border: 1px solid #dedede;
				background: transparent;
				cursor: pointer;
				transition: all 0.3s;

				&:hover {
					color: #da1a45;
					border: 1px solid #da1a45 !important;
				}
			}

			.active {
				color: #fff !important;
				;
				cursor: pointer;
				background: #da1a45;
				border-color: #da1a45;
			}

		}

		.box {
			margin-top: 50px;
		}
	}
</style>